<template>
  <view class="serachTab">
    <view
      v-for="(item,index) in datatab"
      :key="index"
      class="item"
      :class="tabIndex === index ? 'avt' : ''"
      @click="tab(index)"
    >
      <view>{{ item.name }}</view>
      <view v-show="showNum" class="num">{{ item.count }}</view>
    </view>
  </view>
</template>

<script>
export default {
  props:{
    datatab:{
      type:Array,
      default: () => []
    },
    showNum: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tabIndex:0
    }
  },
  methods:{
    tab (index) {
      this.tabIndex = index
      this.$emit('tab', index)
    }
  }
  
}
</script>

<style lang="less" scoped>
.serachTab {
  width: 100%;
  height: 90upx;
  background: #ffffff;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  .item {
    width: 30%;
    text-align: center;
    color: rgba(67,79,93,0.6);
    font-size: 28upx;
    margin-right: 60upx;
    position: relative;
  }
  .num{
    position: absolute;
    top: 0;
    right: 0;
    width: 25upx;
    height: 25upx;
    line-height: 20upx;
    text-align: center;
    background: red;
    color: #fff;
    font-size: 24upx;
    border-radius: 50%;
  }
  .avt {
    position: relative;
    color: #4e98ff;
    &::before {
      content: '';
      position: absolute;
      border-radius: 3upx;
      left:50%;
      bottom: -18upx;
      margin-left:-16upx;
      width: 32upx;
      height: 6upx;
      background: #4e98ff;
    }
  }
}
</style>
